<template>
	<view>
		<zy-title rightIcon2="ic_bell_white.png" rightIcon="ic_setting_white.png" @right2="toRanking" @right="toSetting">
			<slot name="back">
				<view class="zy-row zy-btn-white-opacity-sm zy-ml-lg">
					<image class="zy-icon" mode="widthFix" :src="getImageUrl('ic_eye_white.png')"></image>
					<view class="zy-text-white-sm zy-ml-sm" @click="toVisit">新访客</view>
				</view>
			</slot>
		</zy-title>

		<view class="zy-page-padding">
			<!-- 用户信息:头像，昵称，世界号 -->
			<view class="zy-row zy-mt-50" @click="toUserInfo">
				<image :src="user.headPicUrl"
					style="width: 160rpx; height: 160rpx; border-radius: 50%; border: 2rpx solid #F5F5F5"></image>
				<view class="zy-column-center zy-flex zy-ml-lg">
					<text class="zy-text-white-lg">{{user.nick}}</text>
					<text class="zy-text-whitegrey zy-mt">世界号：{{user.userCode}}</text>
				</view>
				<zy-arrow-right></zy-arrow-right>
			</view>
			<!-- vip -->
			<view class="zy-row zy-ph-lg vip-bg" @click="toVip">
				<image class="zy-icon" mode="widthFix" :src="getImageUrl('ic_vip_yellow.png')"></image>
				<view class=" zy-flex zy-text-yellow-light-lg zy-ml">{{vip.text}}</view>
				<zy-arrow-right size='10'></zy-arrow-right>
			</view>
			<!-- item:人气认证,我的游历墙 -->
			<view>
				<cell-item label="人气认证" :icon="getImageUrl('ic_crown_white.png')" @click="toAuth"></cell-item>
				<cell-item label="我的游历墙" :icon="getImageUrl('ic_earth_white.png')" @click="toDynamicPerson"></cell-item>
			</view>
		</view>
		
		<quick-message ref="message"></quick-message>
		<popup-vip ref="vip"></popup-vip>
	</view>
</template>

<script>
	import RouteUtil from '@/main/common/RouteUtil';
	import CacheUtil from '@/main/common/CacheUtil';
	export default {
		data() {
			return {
				online: uni.$constant.online,
				user: {},
				vip: {
					text: '开通会员',
					btn: '立即开通'
				}
			}
		},
		onShow() {
			this.requestUser();
		},
		methods: {
			toRanking() {
				// RouteUtil.toRanking()
				// this.$refs.message.show({msg:"kkkkkk"})
				this.$refs.vip.open("https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/image/0561538d025f49b891c5907614043832.jpg")
			},
			toVisit() {
				RouteUtil.toVisit()
			},
			toSetting() {
				RouteUtil.toSetting()
			},
			toUserInfo() {
				RouteUtil.toUserInfo(this.user.txCode)
			},
			toVip() {
				RouteUtil.toVip()
			},
			toAuth() {
				RouteUtil.toAuth()
			},
			toDynamicPerson() {
				RouteUtil.toDynamicPerson(2, CacheUtil.getUserId())
			},

			//以下为接口
			requestUser() {
				uni.$http.getUser().then(res => {
					this.user = res.data;
					if (0 == res.data.vip) {
						this.vip.text = '已开通会员 ' + res.data.vipTime + '到期';
						this.vip.btn = '立即续费';
					} else {
						this.vip.text = '开通会员';
						this.vip.btn = '立即开通';
					}
				})
			},
		}
	}
</script>



<style lang="scss" scoped>
	.vip-bg {
		height: 87rpx;
		background: linear-gradient(105deg, #211F20 0%, #313131 100%);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 1rpx solid #707070;

		margin-top: 80rpx;
	}
</style>